<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <style>
    	#box{
    		width: 200px;
    		height: 50px;
    		font-size:30px;
    		border: 1px solid #000;
    	}
    </style>
</head>
<body>
    <h1>AJAX</h1>
    <hr>

    数字1: <input type="text" id="num1">
    数字2: <input type="text" id="num2">
    <br>
    <br>
    <button onclick="add()">加</button>
    <hr>
    <div id="box"></div>
    <script>
    	function add(){
    		var num1 = document.getElementById('num1').value;
    		var num2 = document.getElementById('num2').value;
	    	var xhr = new XMLHttpRequest();
	    	//事件回调
	    	xhr.onreadystatechange = function(){
	    		// console.log(xhr.readyState);
	    		if(xhr.readyState == 4){
	    			if(xhr.status == 200){
	    				//获取响应文本
	    				alert(xhr.responseText);
	    			}
	    		}
	    	}
	    	//请求初始化
	    	xhr.open('post','./php/3.php',true);
	    	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

	    	//正式发送
	    	xhr.send('a='+num1+'&b='+num2);
    	}

    </script>
    

</body>
</html>